1 弹层滚动穿透解决步骤：

  • 在touchmove中阻止事件传播已经在chrome 中不好使了 硬伤！
  • 各种js的效果都需要记住滚动位置再进行还原 low！
  • 直接在弹层打开之前给html body 设置overflow hidden，此时的位置是会被记住的，顺滑！
  • 使用router 才是王道，页内弹层带入浏览器历史，位置被保持，前进后退的都能使，自然！

2 参考资料

2.1 点击穿透

  1. 移动页面点击穿透问题解决方案
  2. 彻底理解和解决移动WEB开发中CLICK点透问题
  3. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）
  4. 移动页面点击穿透问题解决方案
  5. 也来说说touch事件与点击穿透问题
  6. 移动端的touch事件处理
  7. 移动页面【点击穿透】问题
  8. 解读移动端事件穿透、Zepto tap穿透bug、移动端touch穿透
  9. fastclick和zepto 解决click事件300ms延时区别
  10. 在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意？
  11. 彻底解决TAP(点透)提升移动端点击响应速度
  12. 【移动端兼容问题研究】javascript事件机制详解（涉及移动兼容）

2.2 滚动穿透 滑动穿透

  1. 移动页面滚动穿透解决方案（荐）

  2. 移动端滚动穿透问题完美解决方案

  3. 移动页面滚动穿透如何解决

  4. JS移动客户端–触屏滑动事件

  5. 移动端滚动穿透问题完美解决方案

  6. 移动页面滚动穿透问题解决方案

  7. h5页面弹窗滚动穿透的思考

最后更新： 2022年03月02日 03:32

原始链接： http://rawbin-.github.io/dev-app/javascript/2016-04-17-click-penetrability/

赏
× 赞赏这个人~
打赏二维码